<template>
	<view class="appointment-content">
		<view class="appointment-content-head">
			<view class="appointment-portrait">
				<image src="/static/public/portrait02.png" mode="scaleToFill"></image>
			</view>
			<view class="appointment-information-details" @tap="select_patients">
				<text>请选择患者<text class="cuIcon-playfill"></text></text>
			</view>
		</view>
		<view class="appointment-content-list">
			<view class="appointment-content-item">
				<view class="appointment-item-title">门诊</view>
				<view class="appointment-item-fill">
					<picker class="list-input" :value="outpatientIndex" :range="outpatientList" @change="bindPickerChange('0',$event)">
						<view>{{outpatientList[outpatientIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="appointment-content-item">
				<view class="appointment-item-title">医生</view>
				<view class="appointment-item-fill">
					<picker class="list-input" :value="doctorIndex" :range="doctorList" @change="bindPickerChange('1',$event)">
						<view>{{doctorList[doctorIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="appointment-content-item">
				<view class="appointment-item-title">咨询师</view>
				<view class="appointment-item-fill">
					<picker class="list-input" :value="consultantIndex" :range="consultantList" @change="bindPickerChange('2',$event)">
						<view>{{consultantList[consultantIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="appointment-content-item">
				<view class="appointment-item-title">科室</view>
				<view class="appointment-item-fill">
					<picker class="list-input" :value="departmentIndex" :range="departmentList" @change="bindPickerChange('3',$event)">
						<view>{{departmentList[departmentIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="appointment-content-item">
				<view class="appointment-item-title">时间</view>
				<view class="appointment-item-fill">
					<picker class="list-input" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindPickerChange('99',$event)">
						<view>{{date}}</view>
					</picker>
				</view>
			</view>
			<view class="appointment-content-item">
				<view class="appointment-item-title">时长</view>
				<view class="appointment-item-fill">
					<picker class="list-input" :value="durationIndex" :range="durationList" @change="bindPickerChange('4',$event)">
						<view>{{durationList[durationIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="appointment-content-item">
				<view class="appointment-item-title">项目</view>
				<view class="appointment-item-fill">
					<picker class="list-input" :value="appointmentIndex" :range="appointmentList" @change="bindPickerChange('5',$event)">
						<view>{{appointmentList[appointmentIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="appointment-content-item list-call-black">
				<view class="appointment-item-title">备注</view>
				<view class="appointment-item-fill">
					<textarea class="lins-textarea"  placeholder-style="font-size:15px;" placeholder="请输入备注"></textarea>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				outpatientIndex:0, // 门诊
				outpatientList: ['请选择', '徐东', '德米', '光谷'],
				doctorIndex:0, // 医生
				doctorList: ['未指定医生', '徐医生', '德医生', '光医生'],
				consultantIndex:0, // 咨询师
				consultantList: ['请选择', '徐咨询', '德咨询', '光咨询'],
				departmentIndex:0, // 科室
				departmentList: ['请选择', '种植', '正畸', '修复'],
				durationIndex:0, // 时长
				durationList: ['请选择', '15', '30', '45', '60'],
				appointmentIndex:0, // 项目
				appointmentList: ['请选择', '洁牙', '拔牙', '美白'],
				date: currentDate
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindPickerChange(type,event){
				switch (type){
					case '0':
						this.outpatientIndex = event.target.value
						break;
					case '1':
						this.doctorIndex = event.target.value
						break;
					case '2':
						this.consultantIndex = event.target.value
						break;
					case '3':
						this.departmentIndex = event.target.value
						break;
					case '4':
						this.durationIndex = event.target.value
						break;
					case '5':
						this.appointmentIndex = event.target.value
						break;
					case '99':
						this.date = event.target.value
						break;
					default:
						break;
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			select_patients(){
				uni.navigateTo({
					url: `/pages/appointment/appointment/appointment_selectPatients`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.appointment-content{
		padding-top: 20rpx;
	}
	.appointment-content-head{
		background-color:white;
		display:flex;
		align-items:center;
		padding:50rpx 20rpx 50rpx 40rpx;
		
		.appointment-portrait{
			flex:1;
			
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
	
	.appointment-content-list{
		background-color:white;
		margin:20rpx 0 30rpx;
		padding:0 20rpx;
		
		.appointment-content-item{
			display:flex;
			border-bottom:2rpx solid #dddddd;
			align-items:center;
			padding:20rpx 0 20rpx 10rpx;
			
			.appointment-item-fill{
				flex:1;
				
				.list-input{
					text-align: right;
					padding-right: 15rpx;
				}
			}
		}
		
		.list-call-black{
			display: block;
			border: none;
			
			.lins-textarea{
				width: 100%;
				height: 200rpx;
			}
		}
	}
</style>
